<template>
  <div id="app">
    <div class="top">
      <div class="top-center">
        <h3 class="logoText">国家标准验证点综合管理平台</h3>
        <i class="colorText"
          >坚持系统规划 / 坚持改革创新 / 坚持开发融合 / 坚持注重实效&nbsp;</i
        >
      </div>
    </div>
    <div class="main">
      <div class="left-tree">
        <p class="title">{{ title }}</p>
        <div class="tree">
          <el-tree
            :data="treeData"
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :current-node-key='currentId'
            :props="defaultProps"
            @node-click="nodeClick"
          >
          </el-tree>
        </div>
      </div>
      <div class="right">
        <div class="content" v-if="isList">
          <h2 class="name">{{ typeName }}</h2>
          <div class="list-box">
            <div
              class="item"
              v-for="(item, index) in servicePlatformData"
              :key="item.name + index"
            >
              <div class="left" v-if="item.imageUrl">
                <img :src="item.imageUrl" alt="" />
              </div>
              <div
                class="right1"
                :style="{ width: item.imageUrl ? '45%' : '100%' }"
              >
                <h3 class="h3" @click="toLink(item.link)">{{ item.title }} <span class="time">{{ item.createDate.split(" ")[0] }}</span></h3>
                <p class="des">{{ item.shortContent }}</p>
                <p class="tiaozhuan" @click="toLink(item.link)">
                  链接: {{ item.link }}
                </p>
                <p class="showCount">
                  <span class="createName"
                    >{{ item.userDepartment }} {{ item.userName }}</span
                  >
                  <span class="time">{{ item.createDate.split(" ")[0] }}</span>
                  <!-- <span class="readCount"
                    ><i class="el-icon-view" style="margin-right: 5px"></i
                    >{{ item.readCount }}</span
                  > -->
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="block" v-if="isList">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10,20]"
            layout="sizes, prev, pager, next"
            :total="pagePamars.total"
          >
          </el-pagination>
        </div>
        <iframe
          id="detail"
          v-if="!isList"
          :src="iframeUrl"
          style="width: 100%;"
          frameborder="0"
        ></iframe>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
// import servicePlatform from "./views/servicePlatform";
// import { getDate } from "./apis/common.js";
export default {
  // components:{servicePlatform},
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      title: "",
      typeName: "",
      // 是否展示为列表
      isList: true,
      // 初始选中树id
      currentId: '',
      // 当前树数据
      currentNodeData: null,
      treeData: [],
      iframeUrl: "",
      pagePamars: {
        pageSize: 10,
        pageNo: 1,
        total: 0,
      },
      // treeData: [
      //   {
      //     id: 1,
      //     label: "科技奖项",
      //     children: [
      //       {
      //         id: 4,
      //         label: "国家级奖项",
      //       },
      //       {
      //         id: 9,
      //         label: "其他奖项",
      //       },
      //     ],
      //   },
      //   {
      //     id: 2,
      //     label: "科研团队",
      //   },
      //   {
      //     id: 3,
      //     label: "科研政策与经费管理",
      //   },
      //   {
      //     id: 4,
      //     label: "科研基地",
      //     children: [
      //       {
      //         id: 11,
      //         label: "国家科技资源共享服务平台",
      //       },
      //       {
      //         id: 6,
      //         label: "省部级重点实验室",
      //       },
      //       {
      //         id: 7,
      //         label: "省部级技术创新中心",
      //       },
      //       {
      //         id: 8,
      //         label: "联合实验室",
      //       },
      //       {
      //         id: 10,
      //         label: "专业实验室",
      //       },
      //     ],
      //   },
      //   {
      //     id: 5,
      //     label: "代表作",
      //   },
      // ],
      servicePlatformData: [],
      // servicePlatformData: [
      //   {
      //     name: "国家计量科学数据中心",
      //     des: "国家计量科学数据中心致力于收集、整理、存储我国范围内计量领域的科学数据，发布权威的计量数据产品为客户提供便利的计量数据服务。数据中心的数据包括计量参考数据、计量科研数据、计量基标准数据、计量检测数据等，可为政府、计量技术机构、科研人员、相关企业提供精准、安全、可靠、可信计量大数据服务。",
      //     href: "https://www.nmdc.ac.cn",
      //     imgUrl: require("./imgs/1.png"),
      //   },
      //   {
      //     name: "国家计量科学数据中心",
      //     des: "国家计量科学数据中心致力于收集、整理、存储我国范围内计量领域的科学数据，发布权威的计量数据产品为客户提供便利的计量数据服务。数据中心的数据包括计量参考数据、计量科研数据、计量基标准数据、计量检测数据等，可为政府、计量技术机构、科研人员、相关企业提供精准、安全、可靠、可信计量大数据服务。",
      //     href: "https://www.nmdc.ac.cn",
      //     imgUrl: require("./imgs/1.png"),
      //   },
      // ],
    };
  },
  created(){
    // this.getData(this.pagePamars);
  },
  mounted() {
    this.getData(this.pagePamars);
    // window.addEventListener("load", () => {
    //   console.log("页面渲染完成");
    //   if (
    //     top.window.document
    //       .querySelector("#mainIframe")
    //       .contentDocument.documentElement.querySelector("#detail")
    //   ) {
    //     top.window.document
    //       .querySelector("#mainIframe")
    //       .contentDocument.documentElement.querySelector(
    //         "#detail"
    //       ).contentDocument.body.style.zoom =
    //       top.window.document
    //         .querySelector("#mainIframe")
    //         .contentDocument.documentElement.querySelector(".right")
    //         .offsetWidth /
    //       (top.window.document
    //         .querySelector("#mainIframe")
    //         .contentDocument.documentElement.querySelector("#detail")
    //         .contentDocument.documentElement.querySelector(".content_container")
    //         .offsetWidth +
    //         200);
    //   }
    // });
    // window.addEventListener("resize", () => {
    //   console.log("页面缩放");
    //   if (
    //     top.window.document
    //       .querySelector("#mainIframe")
    //       .contentDocument.documentElement.querySelector("#detail")
    //   ) {
    //     top.window.document
    //       .querySelector("#mainIframe")
    //       .contentDocument.documentElement.querySelector(
    //         "#detail"
    //       ).contentDocument.body.style.zoom =
    //       top.window.document
    //         .querySelector("#mainIframe")
    //         .contentDocument.documentElement.querySelector(".right")
    //         .offsetWidth /
    //       (top.window.document
    //         .querySelector("#mainIframe")
    //         .contentDocument.documentElement.querySelector("#detail")
    //         .contentDocument.documentElement.querySelector(".content_container")
    //         .offsetWidth +
    //         200);
    //   }
    // });
    // this.getData(this.pagePamars);
  },
  methods: {
    //获取左边树
    getData(pagePamars) {
      axios
        .get(
          `/seeyon/menusInfo.do?method=getDataList&pageSize=${pagePamars.pageSize}&pageNo=${pagePamars.pageNo}&type=${top.parent.type}&id=${top.parent.typeId}&pageTitle=${top.parent.pageTitle}`
          // `/seeyon/menusInfo.do?method=getDataList&pageSize=2&pageNo=1&type=bul&id=3259884397428688248`
        )
        .then((res) => {
          if (res.status === 200) {
            console.log(res);
            this.servicePlatformData = res.data.data;
            this.title = res.data.menus.title;
            this.treeData = [];
            this.typeName = res.data.typeName;
            this.treeData = res.data.menus.tree;
            this.pagePamars.total = res.data.total;
            console.log('左边树数据：',this.treeData)
            this.treeData.forEach((item)=>{
                if(item.id == Number(top.parent.treeId)){
                  this.currentNodeData = item
                  console.log('当前节点数据：',this.currentNodeData)
                }
              })
              if(!!this.currentNodeData.children){
                console.log('有子菜单',this.currentNodeData.children[0])
                // this.setTreeChecked(this.currentNodeData.children[0].id)
                // document.querySelector('.tree').setAttribute('current-node-key',this.currentNodeData.children[0].id)
                this.$refs.tree.setCurrentKey(this.currentNodeData.children[0].id)
                this.currentId = this.currentNodeData.children[0].id
                  this.$nextTick(() => {
                      this.$refs['tree'].setCurrentKey(this.currentId)
                  })
                this.nodeClick(this.currentNodeData.children[0])
              }
              else{
                console.log('没有子菜单',this.currentNodeData.id)
                this.currentId = this.currentNodeData.id
                this.$nextTick(() => {
                      this.$refs['tree'].setCurrentKey(this.currentId)
                  })
                // document.querySelector('.tree').setAttribute('current-node-key',this.currentNodeData.id)
                this.nodeClick(this.currentNodeData)
                this.$refs.tree.setCurrentKey(this.currentNodeData.id)
                console.log('获取当前节点',this.$refs.tree.getNode(this.currentNodeData.id))
                // this.setTreeCgetRootNodecked(this.currentNodeData.id)
              }
            // this.init(this.currentNodeData)
            
          }
        });
    },
    getDataCopy(pagePamars, item) {
      axios
        .get(
          `/seeyon/menusInfo.do?method=getDataList&pageSize=${pagePamars.pageSize}&pageNo=${pagePamars.pageNo}&type=${item.type}&id=${item.typeId}&pageTitle=${top.parent.pageTitle}`
          // `/seeyon/menusInfo.do?method=getDataList&pageSize=${pagePamars.pageSize}&pageNo=${pagePamars.pageNo}&type=news&id=-1245471049887365678`
        )
        .then((res) => {
          if (res.status === 200) {
            console.log(res);
            this.servicePlatformData = res.data.data;
            this.title = res.data.menus.title;
            this.typeName = res.data.typeName;
            // res.data.menus.tree.forEach((item, index) => {
            //   this.treeData.push({
            //     id: index,
            //     label: item.name,
            //     url: item.url,
            //     typeId:item.newsTypeId,
            //     type:item.pageTitle
            //   });
            // });
            this.pagePamars.total = res.data.total;
            if (res.data.total < 2) {
              this.isList = false
              this.iframeUrl = res.data.data[0].link
            }
            console.log(this.pagePamars.total);
          }
        });
    },
    toLink(url) {
      window.open(url, "_blank");
    },
    // 设置初始树节点选中效果
    setTreeChecked(id) {
      console.log('id>>',id)
      const tree = this.$refs.tree; // 获取 el-tree 的实例
      console.log('tree>>',tree)
      // const node = tree.getNode(id); // 根据 node-key 获取节点
      // console.log('node>>',node)
      tree.setCurrentKey(id); // 设置当前选中节点
      tree.setCurrentNode(id); // 设置当前选中节点
      tree.setChecked(id); // 设置节点勾选状态
    },
    init(data){
      this.getDataCopy(this.pagePamars, this.treeData[0]);
        if (data.children) {
        return;
      } else {
        if (data.isList) {
          this.isList = data.isList;
          this.getDataCopy(this.pagePamars, data);
        } else {
          this.isList = data.isList;
          this.iframeUrl = data.url;
          console.log(this.iframeUrl);
        }
      }
    },
    nodeClick(data) {
      this.pagePamars = {
        pageSize: 10,
        pageNo: 1,
        total: 0,
      }
      console.log("点击左边树", data);
      this.currentNodeData = data
      if (!!data.children) {
        return;
      } else {
        if (data.isList) {
          this.isList = data.isList;
          this.getDataCopy(this.pagePamars, data);
        } else {
          this.isList = data.isList;
          this.iframeUrl = data.url;
          console.log(this.iframeUrl);
        }
      }
    },
    handleSizeChange(val) {
      this.pagePamars.pageSize = val;
      this.getDataCopy(this.pagePamars,this.currentNodeData);
    },
    handleCurrentChange(val) {
      console.log(`当前树数据:${this.currentNodeData} `);
      this.pagePamars.pageNo = val;
      this.getDataCopy(this.pagePamars,this.currentNodeData);
    },
  },
};
</script>
<style>
@import "./style/index.css";
#detail body {
  max-width: 100%; /* 或您期望的最大宽度值 */
  overflow-x: hidden;
}
#detail .content_container{
  width: 100% !important;
  padding: 0;
}
</style>
<style lang="less" scope>
* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: auto;
  .top {
    min-width: 1500px;
    display: flex;
    justify-content: end;
    background: linear-gradient(to bottom, #d3ecfa, #fff);
    height: 110px;
    .top-center {
      min-width: 1500px;
      width: 90%;
      margin: 0 auto;
      position: relative;
      .logoText {
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
        color: #015c84;
        font-size: 35px;
        font-weight: 600;
      }
      .colorText {
        font-size: 18px;
        position: absolute;
        bottom: 30%;
        font-size: 18px;
        right: 0px;
        background: linear-gradient(
          to right,
          #d69683,
          #e1be79,
          #65cfcb,
          #2c6f8d
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .content_container{
    width: 100%;
    padding: 0 !important;
  }
  .main {
    width: 90%;
    min-width: 1500px;
    height: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left-tree {
      float: left;
      width: 250px;
      height: 100%;
      box-shadow: 0px 0px 5px #cfd1d1 !important;

      .title {
        font-size: 20px;
        background-color: #3a8fc8;
        height: 60px;
        line-height: 60px;
        font-weight: 600;
        color: #fff;
        text-align: left;
        padding: 0 30px;
      }
      .tree {
        padding: 0 20px;
        .el-tree--highlight-current
          .el-tree-node.is-current
          > .el-tree-node__content {
          background-color: #fff;
          color: red;
        }
        .el-tree {
          // 修改图标
          .el-tree-node .el-tree-node__content {
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #e5e5e5;
            box-sizing: border-box;
            font-size: 16px;
            .el-tree-node__label{
              font-size: 18px;
              font-weight: 600;
            }
            .el-icon-caret-right:before {
              content: "+";
              display: block;
              width: 16px;
              height: 16px;
              font-size: 16px;
            }
            .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
              content: "-";
              display: block;
              width: 15px;
              height: 20px;
              font-size: 18px;
            }
            .el-tree-node__expand-icon.expanded {
              -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
            }
          }
        }
      }
    }
    .right {
      float: left;
      width: calc(100% - 300px);
      height: 800px;
      // padding: 0 50px;
      box-sizing: border-box;
      position: relative;
      #detail {
        width: 100%;
        height: 100%;
      }
      .content {
        width: 100%;
        height: 680px;
        position: relative;
        .name {
          text-align: center;
          line-height: 60px;
          font-size: 20px;
          font-weight: 600;
          border-bottom: 1px solid #e5e5e5;
        }
        .list-box {
          width: 100%;
          height: calc(100% - 60px);
          overflow-x: hidden;
          overflow-y: auto;
          .item {
            padding: 20px 10px;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            justify-content: space-between;
            max-height: 280px;
            height: max-content;
            border-bottom: 1px solid #e5e5e5;
            .left {
              width: 45% !important;
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                width: 350px;
                cursor: pointer;
                scale: 0.8;
                transition: transform 1s ease;
              }
              img:hover {
                transform: scale(1.2);
              }
            }
            .right1 {
              // width: 45% !important;
              padding: 0 !important;
              .h3 {
                line-height: 20px;
                font-size: 18px;
                font-weight: normal;
                cursor: pointer;
                .time{
                  float: right;
                  font-size: 16px;
                }
              }
              .des {
                display: none !important;
                line-height: 26px;
                white-space: normal;
                display: -webkit-box; /* 使用旧版 WebKit 内核 */
                -webkit-box-orient: vertical; /* 设置为纵向排列 */
                -webkit-line-clamp: 4; /* 显示 3 行文本 */
                overflow: hidden; /* 隐藏溢出的内容 */
                text-overflow: ellipsis; /* 显示省略号 */
                color: gray;
              }
              .tiaozhuan {
                display: none;
                line-height: 32px;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .showCount {
                display: none;
                color: gray;
                line-height: 32px;
                .time {
                  // margin-left: 50px;
                  float: right;
                }
                .readCount {
                  float: right;
                }
              }
            }
          }
        }
      }
      .block {
        width: 60%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
